// 开启代码扫描，需用户承诺书
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Checkbox, Button, Balloon } from '@teamix/ui';
import './index.scss';
import intl from '../../locale';

export default class ProjectModal extends React.Component {
  static propTypes = {
    taskName: PropTypes.string,
    okFn: PropTypes.func,
    closeFn: PropTypes.func,
    toogleService: PropTypes.func,
    noFooter: PropTypes.bool,
  };

  static defaultProps = {
    taskName: '',
    okFn: () => {},
    closeFn: () => {},
    toogleService: () => {},
    noFooter: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: true,
      isSelected: false,
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.trigger) {
      return {};
    }
    return {
      isModalOpen: props.isModalOpen,
    };
  }

  componentWillUnmount() {
    this.setState({
      isSelected: false,
    });
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.props.closeFn();
  };

  handleOk = () => {
    if (!this.state.isSelected) {
      return null;
    }
    this.props.toogleService({
      service: this.props.taskKey,
      authorized: true,
    });

    this.props.okFn();
  };

  toggleSelect = (value) => {
    this.setState({
      isSelected: value,
    });
  };

  renderStatisticsInfo = () => {
    return (
      <React.Fragment>
        <div className="guarantee-text">
          {intl.get({
            id: 'code-assets.components.guaranteeModal.YouUnderstandAndConfirmThat',
            defaultMessage:
              '1、您理解并确认，基于您要求Codeup提供数据洞察服务的要求，您授权同意Codeup读取、加工（统称为“处理”） 您或您客户代码库的当前和历史数据，Codeup将通过对前述数据的处理进而为您提供数据洞察服务。',
          })}
        </div>
        <div className="guarantee-text">
          {intl.get({
            id: 'code-assets.components.guaranteeModal.BothYouAndCodeupUnderstand',
            defaultMessage:
              '2、您和Codeup均理解并确认，Codeup除为执行您的服务指令进行如上处理和使用目的外，不做其他任何用途。',
          })}
        </div>
        <div className="guarantee-text">
          {intl.get({
            id: 'code-assets.components.guaranteeModal.YouUnderstandAndAgreeTo',
            defaultMessage:
              '3、您理解并同意该用户授权承诺书，勾选服务开通，您即授权同意Codeup将前述您的数据用于为您提供数据洞察服务的用途，因此，请您理解并确认用户承诺书中的内容，并谨慎操作开通。',
          })}
        </div>
        <div className="guarantee-text">
          {intl.get({
            id: 'code-assets.components.guaranteeModal.IfYouNoLongerUse',
            defaultMessage:
              '4、如果您不再继续使用数据洞察服务，请您通过点击【关闭服务】取消就Codeup对您前述数据进行处理的同意授权，Codeup将自您取消授权同意之日起，不再继续处理您的数据，您亦不能继续使用Codeup数据洞察服务。',
          })}
        </div>
        <div className="guarantee-text">
          {intl.get({
            id: 'code-assets.components.guaranteeModal.YouFullyUnderstandAndAcknowledge',
            defaultMessage:
              '5­、您充分知晓并认可，Codeup尽勤勉义务向您提供服务，Codeup所提供的技术服务和/或可交付成果物仅仅是当时情况下给出的技术建议，Codeup的服务仅按照现有技术和条件所能达到的现状提供。',
          })}
        </div>
      </React.Fragment>
    );
  };

  render() {
    const { taskName, taskKey, noFooter } = this.props;
    return (
      <React.Fragment>
        {this.state.isModalOpen ? (
          <Dialog
            title={
              <div className="guarantee-title">
                {intl.get({
                  id: 'code-assets.components.guaranteeModal.UserCommitmentLetter',
                  defaultMessage: '用户承诺书',
                })}
              </div>
            }
            visible
            style={{ width: '600px' }}
            onClose={this.onClose}
            footer={[
              <Button onClick={this.onClose}>取消</Button>,
              this.state.isSelected ? (
                <Button
                  type="primary"
                  disabled={!this.state.isSelected}
                  style={{ marginLeft: '10px' }}
                  onClick={this.handleOk}
                >
                  确定
                </Button>
              ) : (
                <Balloon
                  align="t"
                  trigger={
                    <Button
                      type="primary"
                      disabled={!this.state.isSelected}
                      style={{ marginLeft: '10px' }}
                      onClick={this.handleOk}
                    >
                      确定
                    </Button>
                  }
                  closable={false}
                >
                  请先勾选承诺书文末的服务确认后操作
                </Balloon>
              ),
            ]}
          >
            {taskKey === 'project_report' ? (
              this.renderStatisticsInfo()
            ) : (
              <React.Fragment>
                <div className="guarantee-text">
                  {intl.get(
                    {
                      id: 'code-assets.components.guaranteeModal.YouUnderstandAndConfirmThat.1',
                      defaultMessage:
                        '1、您理解并确认，基于您要求Codeup提供{taskName}服务的要求，您授权同意Codeup读取、加工（统称为“处理”） 您或您客户的代码库数据，Codeup将通过对前述数据的处理进而为您提供{taskName}服务。',
                    },
                    { taskName },
                  )}
                </div>
                <div className="guarantee-text">
                  {intl.get({
                    id: 'code-assets.components.guaranteeModal.BothYouAndCodeupUnderstand',
                    defaultMessage:
                      '2、您和Codeup均理解并确认，Codeup除为执行您的服务指令进行如上处理和使用目的外，不做其他任何用途。',
                  })}
                </div>
                <div className="guarantee-text">
                  {intl.get(
                    {
                      id: 'code-assets.components.guaranteeModal.YouUnderstandAndAgreeTo.1',
                      defaultMessage:
                        '3、您理解并同意该用户授权承诺书，勾选服务开通，您即授权同意Codeup将前述您的数据用于为您提供{taskName}服务的用途，因此，请您理解并确认用户承诺书中的内容，并谨慎操作开通。',
                    },
                    { taskName },
                  )}
                </div>
                {
                  // 源码漏洞检测服务文案不一样，区分一下
                  taskKey === 'pinpoint_detection' ? (
                    <div className="guarantee-text">
                      {intl.get({
                        id: 'code-assets.components.guaranteeModal.IfYouNoLongerUse.1',
                        defaultMessage:
                          '4、如果您不再继续使用源码漏洞检测服务，请您前往 Flow 流水线取消对应检测任务，Codeup将自您取消之日起，不再继续处理您的数据，您亦不能继续使用源码漏洞检测服务。',
                      })}
                    </div>
                  ) : (
                    <div className="guarantee-text">
                      {intl.get(
                        {
                          id: 'code-assets.components.guaranteeModal.IfYouNoLongerUse.2',
                          defaultMessage:
                            '4、如果您不再继续使用{taskName}服务，请您通过点击【关闭服务】取消就Codeup对您前述数据进行处理的同意授权，Codeup将自您取消授权同意之日起，不再继续处理您的数据，您亦不能继续使用Codeup{taskName}服务。',
                        },
                        { taskName },
                      )}
                    </div>
                  )
                }
                <div className="guarantee-text">
                  {intl.get({
                    id: 'code-assets.components.guaranteeModal.YouFullyUnderstandAndAcknowledge',
                    defaultMessage:
                      '5­、您充分知晓并认可，Codeup尽勤勉义务向您提供服务，Codeup所提供的技术服务和/或可交付成果物仅仅是当时情况下给出的技术建议，Codeup的服务仅按照现有技术和条件所能达到的现状提供。',
                  })}
                </div>
              </React.Fragment>
            )}
            {!noFooter && (
              <div className="guarantee-checkbox">
                <Checkbox checked={this.state.isSelected} onChange={this.toggleSelect}>
                  {intl.get({
                    id: 'code-assets.components.guaranteeModal.IHaveReadTheRelevant',
                    defaultMessage: '我已阅读相关协议并确认开通服务',
                  })}
                </Checkbox>
              </div>
            )}
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, { onClick: this.showModal })}
      </React.Fragment>
    );
  }
}
